<script setup lang="ts">
import { Refresh } from "@element-plus/icons-vue";
import { getPendingOrderApi } from "@/api/pharmacists";
import { getSortingPendingNumApi } from "@/api/sorting";
import {
  getPackagePendingNumApi,
  getHangupPackagePendingNumApi
} from "@/api/package";
import { getOutboundPendingNumApi } from "@/api/outbound";
import { ref, onMounted } from "vue";
import { useUserStoreHook } from "@/store/modules/user";
import { useRouter } from "vue-router";
import fuhePng from "@/assets/img/fuhe.png";
import baoguoPng from "@/assets/img/baoguo.png";
import jianhuoPng from "@/assets/img/jh-icon.png";
import fenjianPng from "@/assets/img/jianhuo.png";
import yaoshiPng from "@/assets/img/yaoshi.png";
import zhuangxiangPng from "@/assets/img/zhuangxiang.png";
import refreshPng from "@/assets/img/refresh.png";
const router = useRouter();
const fullscreenLoading = ref(false);

const userStore = useUserStoreHook();
const warehouseId = userStore.userInfo.warehouseId;
const warehouseName = userStore.userInfo.warehouseName;
const dataList = ref([
  {
    id: "pharmacists",
    name: "药师审核",
    num: 0,
    txt: "",
    img: yaoshiPng
  },
  {
    id: "jianhuo",
    name: "拣货管理",
    num: 0,
    txt: "",
    img: jianhuoPng
  },
  {
    id: "fenjian",
    name: "分拣管理",
    num: 0,
    txt: "",
    img: fenjianPng
  },
  {
    id: "check",
    name: "复核装包",
    num: 0,
    txt: "",
    img: fuhePng
  },
  {
    id: "box",
    name: "装箱出库",
    num: 0,
    txt: "",
    img: zhuangxiangPng
  },
  {
    id: "parcel",
    name: "包裹处理",
    num: 0,
    txt: "",
    img: baoguoPng
  }
]);
// 查询药师待审核数量
async function getPharmacistsPendingNum() {
  const data = await getPendingOrderApi(warehouseId);
  dataList.value[0].num = data.count;
  dataList.value[0].txt = data.count + "待审";
}

async function getSortingPendingNum() {
  const data = await getSortingPendingNumApi(warehouseId);
  dataList.value[1].num = data.pendingPickQuantity;
  dataList.value[1].txt = data.pendingPickQuantity + "待拣";
  dataList.value[2].num = data.pendingSortingQuantity;
  dataList.value[2].txt = data.pendingSortingQuantity + "待分";
}

async function getPackagePendingNum() {
  const data = await getPackagePendingNumApi(warehouseId);
  dataList.value[3].num = data.count;
  dataList.value[3].txt = data.count + "待包";
  const data2 = await getHangupPackagePendingNumApi(warehouseId);
  dataList.value[5].num = data2.count;
  dataList.value[5].txt = data2.count + "挂起";
}

async function getOutboundPendingNum() {
  const data = await getOutboundPendingNumApi(warehouseId);
  dataList.value[4].num = data.count;
  dataList.value[4].txt = data.count + "待出";
}
function init() {
  Promise.all([
    getPharmacistsPendingNum(),
    getSortingPendingNum(),
    getPackagePendingNum(),
    getOutboundPendingNum()
  ]).then(() => {
    fullscreenLoading.value = false;
  });
}
function refresh() {
  fullscreenLoading.value = true;
  init();
}
function logoOut() {
  userStore.logOut();
}

function goPage(url) {
  router.push({ path: "/" + url });
}
onMounted(() => {
  init();
});
</script>
<template>
  <div class="inner-cont">
    <h1>
      <span class="in-title">{{ warehouseName }}分拣系统</span>
    </h1>
    <div class="btn-group">
      <span class="b-name">{{ userStore.userInfo.username }}</span>
      <div class="b-btn" @click="logoOut">退出登录</div>
    </div>
    <div class="card-conten">
      <el-card
        class="box-card"
        v-for="(item, index) in dataList"
        @click="goPage(item.id)"
        :key="index"
      >
        <div class="img">
          <el-image :src="item.img" fit="scale-down" />
        </div>
        <div class="name">
          {{ item.name }}
        </div>
        <div class="num">
          {{ item.txt }}
        </div>
      </el-card>
    </div>
    <div class="re-btn" @click="refresh">
      <el-image
        :class="['re-img', fullscreenLoading ? 'rotate-infinity' : '']"
        :src="refreshPng"
        fit="scale-down"
      />
      <div class="b-txt">刷新数据</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}
.rotate-infinity {
  animation: rotate 0.5s linear infinite;
}
h1 {
  font-size: 20px;
  margin-bottom: 10px;
  text-align: center;
}

@media screen and (max-width: 1000px) {
  .inner-cont {
    .in-title {
      width: 200px;
    }
  }
}
.inner-cont {
  position: relative;
  background-color: #f5f8fa;
  h1 {
    height: 70px;
    line-height: 70px;
    background: white;
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    color: #3d3d3d;
    overflow: hidden;
    .in-title {
      display: inline-block;
      overflow: hidden;
      word-break: break-word;
    }
  }
  .btn-group {
    position: absolute;
    height: 70px;
    top: 0px;
    right: 30px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .b-name {
      margin-right: 10px;
      font-size: 18px;
      color: #3f4254;
      font-weight: bold;
      width: 120px;
      overflow: hidden;
      word-break: keep-all;
    }
    .b-btn {
      background-color: #3689f5;
      color: white;
      width: 118px;
      height: 50px;
      border-radius: 10px;
      line-height: 50px;
      text-align: center;
    }
  }
}

.card-conten {
  width: 100%;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(3, 234px);
  grid-gap: 20px;
  grid-auto-rows: 234px;
  margin-top: 48px;
  width: 742px;
  .box-card {
    box-sizing: border-box;
    border-radius: 10px;
    :deep(.el-card__body) {
      height: 100%;
      box-sizing: border-box;
      background: white;
    }
    .img {
      width: 80px;
      height: 80px;
      text-align: center;
      border-radius: 10px;
      margin: auto;
      margin-top: 10px;

      .el-image {
        width: 100%;
        height: 100%;
      }
    }
    .name {
      font-weight: bold;
      text-align: center;
      font-size: 22px;
      color: #3f4254;
      margin-top: 20px;
    }
    .num {
      text-align: center;
      margin-top: 20px;
      color: #b5b5c3;
      font-size: 18px;
      font-weight: bold;
    }
  }
}

.re-btn {
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 80px;
  background: white;
  color: #3689f5;
  border-radius: 10px;
  width: 234px;
  height: 50px;
  cursor: pointer;
  .re-img {
    width: 32px;
    height: 32px;
  }
  .b-txt {
    margin-left: 10px;
  }
}
// 屏幕适配
// @media screen and (min-width: 1300px) {
//   .card-conten {
//     grid-template-columns: repeat(3, minmax(100px, 1fr));
//   }
// }
</style>
